<template>
  <div class="component-page">
    <div class="component-page-part">
      <span class="mb20 component-page-part-title">表格Demo</span>
      <div class="demo-table">
        <Table
          :data="tableData"
          :columns="tableColumns"
          :options="{
            headerFixed: true,
            minWidth: 120,
            setting: { show: true, storage: true, storageKey: 'test_table' },
            searchSetting: { show: true, storage: true, storageKey: 'test_table_search' }
            // virtual: { type: 'fix', options: { height: 138, bufferNumber: 2, offsetTop: 45 } }
          }"
          :pagination="pagination"
        >
          <template #name="{ scope }">
            <span class="demo-table-name">{{ scope.name }}</span>
          </template>
          <template #carType="{ scope }">
            <div class="wik-column">
              <div class="wik-column-item" v-for="item in scope.carType" :key="item.id">{{ item.name }}</div>
            </div>
          </template>
          <template #procurementStartTime="{ scope }">
            <TriggerContext
              :component="Calendar"
              :props="{
                'selected-Date': scope.procurementStartTime,
                handleDateChange: (date: any) => {
                  scope.procurementStartTime = date;
                }
              }"
            >
              <div class="wik-column-rl">
                <span class="demo-table-name">{{ scope.procurementStartTime }}</span>
                <svg-icon name="rl"></svg-icon>
              </div>
            </TriggerContext>
          </template>
          <template #procurementEndTime="{ scope }">
            <span class="demo-table-name">{{ scope.procurementEndTime }}</span>
          </template>
        </Table>
      </div>
    </div>
    <div class="component-page-part">
      <span class="mb20 component-page-part-title">表格Demo1</span>
      <div class="demo-table">
        <Table
          :data="tableData1"
          :columns="tableColumns1"
          :options="{
            headerFixed: true,
            minWidth: 120,
            setting: { show: true, storage: true, storageKey: 'test_table1' },
            searchSetting: { show: true, storage: true, storageKey: 'test_table_search1' }
            //virtual: { type: 'auto', options: { height: 138, bufferNumber: 2, offsetTop: 45 } }
          }"
          :pagination="pagination1"
        >
          <template #name="{ scope }">
            <span class="demo-table-name">{{ scope.name }}</span>
          </template>
          <template #carType="{ scope }">
            <div class="wik-column">
              <div class="wik-column-item" v-for="item in scope.carType" :key="item.id">{{ item.name }}</div>
            </div>
          </template>
          <template #procurementStartTime="{ scope }">
            <TriggerContext
              :component="Calendar"
              :props="{
                'selected-Date': scope.procurementStartTime,
                handleDateChange: (date: any) => {
                  scope.procurementStartTime = date;
                }
              }"
            >
              <div class="wik-column-rl">
                <span class="demo-table-name">{{ scope.procurementStartTime }}</span>
                <svg-icon name="rl"></svg-icon>
              </div>
            </TriggerContext>
          </template>
          <template #procurementEndTime="{ scope }">
            <span class="demo-table-name">{{ scope.procurementEndTime }}</span>
          </template>
        </Table>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import Table from "@/components/Table/index.vue";
import { TableData, TableColumn } from "@/components/Table/interface";
import TriggerContext from "@/components/TriggerContext/index.vue";
import Calendar from "./components/Calendar.vue";
const tableData = ref<TableData[]>([]);
for (let i = 0; i < 100; i++) {
  tableData.value.push({
    name: "张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三",
    age: i + 1,
    sex: "男",
    address: "北京",
    carType: [
      {
        id: 1,
        name: "MP10S-测试九四测试九四"
      },
      {
        id: 2,
        name: "MP10S-测试九四测试九四测试九四测试九四"
      },
      {
        id: 3,
        name: "MP10S-测试九四测试九四测试九四测试九四"
      }
    ],
    procurementStartTime: "2025-02-19 15:56:00",
    procurementEndTime: "2025-02-19 15:59:00"
  });
}

const tableColumns = ref<TableColumn[]>([
  {
    type: "index",
    title: "编号",
    key: "serialNumber",
    width: 46
  },
  {
    title: "客户",
    key: "name",
    width: 200,
    isFixed: true,
    isShowSort: true,
    isSearch: true,
    filter: {
      type: "input",
      operator: [
        {
          value: "equal",
          label: "等于"
        },
        {
          value: "notEqual",
          label: "不等于"
        },
        {
          value: "lessThan",
          label: "包含"
        }
      ]
    },
    className: "sle"
  },
  {
    title: "订单编号",
    key: "age",
    width: 200,
    isFixed: false,
    isSearch: true,
    filter: {
      type: "input",
      operator: [
        {
          value: "equal",
          label: "等于"
        },
        {
          value: "notEqual",
          label: "不等于"
        },
        {
          value: "lessThan",
          label: "小于"
        },
        {
          value: "lessThanEqual",
          label: "小于等于"
        }
      ]
    },
    className: "sle"
  },
  {
    title: "订单分类",
    key: "sex",
    filter: {
      type: "input",
      operator: [
        {
          value: "equal",
          label: "等于"
        },
        {
          value: "notEqual",
          label: "不等于"
        }
      ]
    },
    className: "sle"
  },
  {
    title: "省份",
    key: "address",
    className: "sle"
  },
  {
    title: "城市",
    key: "name1",
    className: "sle"
  },
  {
    title: "场景",
    key: "age1",
    className: "sle"
  },
  {
    title: "对接",
    key: "sex1",
    className: "sle"
  },
  {
    title: "下单日期",
    key: "address1",
    className: "sle"
  },
  {
    title: "计划交期",
    key: "name2",
    className: "sle"
  },
  {
    title: "审核状态",
    key: "age2",
    className: "sle"
  },
  {
    title: "订单状态",
    key: "sex2",
    className: "sle"
  },
  {
    title: "当前阶段",
    key: "address2",
    className: "sle"
  },
  {
    title: "车型",
    key: "carType",
    className: "sle no-padding"
  },
  {
    title: "数量",
    key: "age3",
    className: "sle"
  },
  {
    title: "生产位置",
    key: "sex3",
    className: "sle"
  },
  {
    title: "主控",
    key: "address3",
    className: "sle"
  },
  {
    title: "进度跟踪",
    key: "name4",
    className: "sle"
  },
  {
    title: "项目物料",
    key: "age4",
    className: "sle"
  },
  {
    title: "销售",
    key: "sex4",
    className: "sle"
  },
  {
    title: "主负责人",
    key: "address4",
    className: "sle"
  },
  {
    title: "电气设计",
    key: "address5",
    className: "sle"
  },
  {
    title: "项目经理",
    key: "address6",
    className: "sle"
  },
  {
    title: "规划设计",
    key: "address7",
    className: "sle"
  },
  {
    title: "技术支持",
    key: "address8",
    className: "sle"
  },
  {
    title: "总图号",
    key: "address9",
    className: "sle"
  },
  {
    title: "提前采购清单下发计划日期",
    key: "procurementStartTime",
    width: 250,
    className: "sle no-padding"
  },
  {
    title: "提前采购清单实际下发日期",
    key: "procurementEndTime",
    width: 250,
    className: "sle no-padding"
  },
  {
    title: "机械图纸计划完成",
    key: "address12",
    width: 250,
    className: "sle"
  },
  {
    title: "机械图纸实际完成",
    key: "address13",
    width: 250,
    className: "sle"
  },
  {
    title: "BOM计划完成",
    key: "address14",
    className: "sle"
  },
  {
    title: "BOM实际完成",
    key: "address15",
    className: "sle"
  },
  {
    title: "电气原理图计划完成",
    key: "address16",
    width: 250,
    className: "sle"
  },
  {
    title: "电气原理图实际完成",
    key: "address17",
    width: 250,
    className: "sle"
  },
  {
    title: "线束图计划完成",
    key: "address18",
    width: 250,
    className: "sle"
  },
  {
    title: "线束图实际完成",
    key: "address19",
    width: 250,
    className: "sle"
  },
  {
    title: "备品备件",
    key: "address20",
    className: "sle"
  },
  {
    title: "零部件目录",
    key: "address21",
    className: "sle"
  },
  {
    title: "说明书",
    key: "address22",
    className: "sle"
  },
  {
    title: "LOGO标贴",
    key: "address23",
    className: "sle"
  },
  {
    title: "制造计划完成(入库)",
    key: "address24",
    width: 250,
    className: "sle"
  },
  {
    title: "制造实际完成(入库)",
    key: "address25",
    width: 250,
    className: "sle"
  },
  {
    title: "发货时间",
    key: "address26",
    className: "sle"
  },
  {
    title: "现场调试计划完成",
    key: "address27",
    width: 180,
    className: "sle"
  },
  {
    title: "场调试实际完成",
    key: "address28",
    width: 180,
    className: "sle"
  },
  {
    title: "计划验收完成",
    key: "address29",
    width: 180,
    className: "sle"
  },
  {
    title: "实际验收完成",
    key: "address30",
    width: 180,
    className: "sle"
  }
]);
const pagination = ref({
  pageSize: 50,
  currentPage: 1,
  total: 600
});

const tableData1 = ref<TableData[]>([]);
for (let i = 0; i < 40; i++) {
  tableData1.value.push({
    name: "测试",
    age: i + 1,
    sex: "男",
    address: "北京",
    carType: [
      {
        id: 1,
        name: "MP10S-测试九四测试九四"
      },
      {
        id: 2,
        name: "MP10S-测试九四测试九四测试九四测试九四"
      },
      {
        id: 3,
        name: "MP10S-测试九四测试九四测试九四测试九四"
      }
    ],
    procurementStartTime: "2025-02-19 15:56:00",
    procurementEndTime: "2025-02-19 15:59:00"
  });
}

const tableColumns1 = ref<TableColumn[]>([
  {
    type: "index",
    title: "编号",
    key: "serialNumber",
    width: 46
  },
  {
    title: "客户",
    key: "name",
    width: 200,
    isFixed: true,
    isShowSort: true,
    isSearch: true,
    filter: {
      type: "input",
      operator: [
        {
          value: "equal",
          label: "等于"
        },
        {
          value: "notEqual",
          label: "不等于"
        },
        {
          value: "lessThan",
          label: "包含"
        }
      ]
    },
    className: "sle"
  },
  {
    title: "订单编号",
    key: "age",
    width: 200,
    isFixed: false,
    isSearch: true,
    filter: {
      type: "input",
      operator: [
        {
          value: "equal",
          label: "等于"
        },
        {
          value: "notEqual",
          label: "不等于"
        },
        {
          value: "lessThan",
          label: "小于"
        },
        {
          value: "lessThanEqual",
          label: "小于等于"
        }
      ]
    },
    className: "sle"
  },
  {
    title: "订单分类",
    key: "sex",
    filter: {
      type: "input",
      operator: [
        {
          value: "equal",
          label: "等于"
        },
        {
          value: "notEqual",
          label: "不等于"
        }
      ]
    },
    className: "sle"
  },
  {
    title: "省份",
    key: "address",
    className: "sle"
  },
  {
    title: "城市",
    key: "name1",
    className: "sle"
  },
  {
    title: "场景",
    key: "age1",
    className: "sle"
  },
  {
    title: "对接",
    key: "sex1",
    className: "sle"
  },
  {
    title: "下单日期",
    key: "address1",
    className: "sle"
  },
  {
    title: "计划交期",
    key: "name2",
    className: "sle"
  },
  {
    title: "审核状态",
    key: "age2",
    className: "sle"
  },
  {
    title: "订单状态",
    key: "sex2",
    className: "sle"
  },
  {
    title: "当前阶段",
    key: "address2",
    className: "sle"
  },
  {
    title: "车型",
    key: "carType",
    className: "sle no-padding"
  },
  {
    title: "数量",
    key: "age3",
    className: "sle"
  },
  {
    title: "生产位置",
    key: "sex3",
    className: "sle"
  },
  {
    title: "主控",
    key: "address3",
    className: "sle"
  },
  {
    title: "进度跟踪",
    key: "name4",
    className: "sle"
  },
  {
    title: "项目物料",
    key: "age4",
    className: "sle"
  },
  {
    title: "销售",
    key: "sex4",
    className: "sle"
  },
  {
    title: "主负责人",
    key: "address4",
    className: "sle"
  },
  {
    title: "电气设计",
    key: "address5",
    className: "sle"
  },
  {
    title: "项目经理",
    key: "address6",
    className: "sle"
  },
  {
    title: "规划设计",
    key: "address7",
    className: "sle"
  },
  {
    title: "技术支持",
    key: "address8",
    className: "sle"
  },
  {
    title: "总图号",
    key: "address9",
    className: "sle"
  },
  {
    title: "提前采购清单下发计划日期",
    key: "procurementStartTime",
    width: 250,
    className: "sle no-padding"
  },
  {
    title: "提前采购清单实际下发日期",
    key: "procurementEndTime",
    width: 250,
    className: "sle no-padding"
  },
  {
    title: "机械图纸计划完成",
    key: "address12",
    width: 250,
    className: "sle"
  },
  {
    title: "机械图纸实际完成",
    key: "address13",
    width: 250,
    className: "sle"
  },
  {
    title: "BOM计划完成",
    key: "address14",
    className: "sle"
  },
  {
    title: "BOM实际完成",
    key: "address15",
    className: "sle"
  },
  {
    title: "电气原理图计划完成",
    key: "address16",
    width: 250,
    className: "sle"
  },
  {
    title: "电气原理图实际完成",
    key: "address17",
    width: 250,
    className: "sle"
  },
  {
    title: "线束图计划完成",
    key: "address18",
    width: 250,
    className: "sle"
  },
  {
    title: "线束图实际完成",
    key: "address19",
    width: 250,
    className: "sle"
  },
  {
    title: "备品备件",
    key: "address20",
    className: "sle"
  },
  {
    title: "零部件目录",
    key: "address21",
    className: "sle"
  },
  {
    title: "说明书",
    key: "address22",
    className: "sle"
  },
  {
    title: "LOGO标贴",
    key: "address23",
    className: "sle"
  },
  {
    title: "制造计划完成(入库)",
    key: "address24",
    width: 250,
    className: "sle"
  },
  {
    title: "制造实际完成(入库)",
    key: "address25",
    width: 250,
    className: "sle"
  },
  {
    title: "发货时间",
    key: "address26",
    className: "sle"
  },
  {
    title: "现场调试计划完成",
    key: "address27",
    width: 180,
    className: "sle"
  },
  {
    title: "场调试实际完成",
    key: "address28",
    width: 180,
    className: "sle"
  },
  {
    title: "计划验收完成",
    key: "address29",
    width: 180,
    className: "sle"
  },
  {
    title: "实际验收完成",
    key: "address30",
    width: 180,
    className: "sle"
  }
]);
const pagination1 = ref({
  pageSize: 20,
  currentPage: 1,
  total: 40
});
</script>
<style lang="scss">
.component-page {
  display: flex;
  flex-flow: column nowrap;
  gap: 20px;
  &-part {
    display: flex;
    flex-flow: column nowrap;
    margin: 20px;
    &-title {
      font-size: 20px;
      font-weight: bold;
      text-align: center;
    }
  }
  .demo-table {
    width: 100%;
    height: 60vh;
  }
  .wik-column {
    width: 100%;
    overflow: hidden;
    .wik-column-item {
      display: block;
      align-items: center;
      height: 45px;
      padding: 0 10px;
      overflow: hidden;
      line-height: 45px;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: default;
      border-bottom: 1px solid #eeeeee;
      &:last-child {
        border: 0;
      }
      &:hover {
        background: var(--el-color-primary-light-9);
      }
    }
  }
  .wik-column-rl {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: inherit;
    padding: 6px 10px;
    cursor: pointer;
    svg {
      display: none;
      color: #aaaaaa;
    }
    &:hover {
      svg {
        display: block;
      }
    }
  }
  .trigger-context {
    width: inherit;
    height: inherit;
  }
}
</style>
